<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import useConsultStore from "@/pinia/modules/consultStore.ts";

import type { Router } from "vue-router";

const consultStore = useConsultStore();

const router: Router = useRouter();

const { departmentList, consultInfo } = storeToRefs(consultStore);

const active = ref(0);

/*根据active计算出来当前一级科室所对应的二级科室列表*/
const subDepartmentList = computed(() => departmentList.value[active.value]?.child);

/*第三步:记录选择的科室ID,跳转到病情描述页面*/
const handleClick = (path: string, subId: string) => {
    /*
    * path:病情描述页
    * subId:科室ID
    * */
    // 记录科室ID
    consultStore.setDepartmentId(subId);
    // 跳转到病情描述页面
    router.push(path);
};

onMounted(() => {
    consultStore.fetchDepartmentList();
});


</script>

<template>
    <div class="department">
        <nav-bar title="选择科室" left-arrow left-text="返回" @click-left="$router.back()"></nav-bar>
        <div class="wrapper">
            <van-sidebar v-model="active">
                <van-sidebar-item v-for="(top) in departmentList" :title="top.name" :id="top.id"></van-sidebar-item>
            </van-sidebar>
            <div class="sub-dep">
                <a :class="{active:consultInfo.depId===sub.id}" v-for="(sub) in subDepartmentList" :key="sub.id" @click="handleClick('/consult/illness',sub.id)">{{ sub.name }}</a>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.department {
    .wrapper {
        height: calc(100vh - 46px);
        overflow: hidden;
        display: flex;

        .van-sidebar {
            width: 130px;

            &-item {
                padding: 14px;
                color: var(--cp-tag);

                &--select {
                    color: var(--cp-main);
                    font-weight: normal;
                }
            }
        }

        .sub-dep {
            flex: 1;
            height: 100%;
            overflow-y: auto;

            > a {
                padding: 14px 30px;
                color: var(--cp-dark);
                display: flex;
                align-items: center;

                &.active {
                    color: #16C2A3;
                }
            }
        }
    }
}
</style>
